<template>
  <div>
    <el-row>
      <!-- <label for="fileinp">
        <input type="button" id="btn" value="上传平面图">
        <span id="text">{{flname}}</span>
        <input type="file" @change="getimg" ref="fileimg" id="fileinp" value>
      </label>-->

      <div style="display:inline-block">
        <!-- <upload tn="img1" localfiletype="02" :imagefile="imgdata" :isupload="1">选择文件</upload> -->
        <div style="clear:both;float:right">
          <el-button type="text" @click="ImageChange(true)">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-fangda"></use>
            </svg>放大
          </el-button>
          <el-button type="text" @click="ImageChange(false)">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-suoxiao"></use>
            </svg>缩小
          </el-button>
        </div>
      </div>

      <!-- <el-button type="primary" style="float:right;margin-right:10px;" @click="geilocls">保存</el-button> -->
    </el-row>
    <!-- Psave -->
    <div class="row text-center" style="padding:2%">
      <div id="div_picsign" v-if="src!=''"></div>
      <div id="div_picsign" v-else style="padding: 20px;text-align:center">请先上传图片</div>
    </div>
  </div>
</template>
<script>
import upload from '~/components/upload.vue'
export default {
  head: {
    link: [
      { rel: 'stylesheet', href: '/css/bootstrap.min.css' },
      { rel: 'stylesheet', href: '/css/jquery.picsign.css' },
      { rel: 'stylesheet', href: '/css/jquery.webui-popover.min.css' },
      { rel: 'stylesheet', href: '/css/layer.css' }
    ]
  },
  components: {
    upload
  },
  data() {
    return {
      imgdata: {
        img1: ''
      },
      zoom: 1,
      src: '',
      ts: this.newStore(),
      flname: '',
      div_picsign: 'div_picsign',
      div_picsign1: 'div_picsign1',
      x0: 0,
      y0: 0,
      x1: 0,
      y1: 0,
      Psigndatas: [],
      style: '',
      canDrag: false
    }
  },
  watch: {
    'imgdata.img1': {
      handler(newval, oldval) {
        // ...
        console.log(newval);
         console.log(oldval);
        this.src = newval

          this.initsign()
          setTimeout(() => {
            this.zuoce = $('.picsignimg').width()
            this.shangce = $('.picsignimg').height()
          }, 200)
        
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getPsigndatas() {
      
      const req = {
        id: this.$route.query.id
      }
      this.spost(this.ts, '/region/getregionbyid', req).then(ts => {
        console.log('ts.d', ts.d)

        this.src = ts.d.imgpath
        console.log(this.src)

        for (let i = 0; i < ts.d.devicelist.length; i += 1) {
          console.log('222', ts.d.devicelist[i])
          let a = { msg: {} }
          a.msg.msg11 = []
          a.left = ts.d.devicelist[i].sideX
          a.top = ts.d.devicelist[i].sideY
          a.msg.pdxname = ts.d.devicelist[i].powerDistName
          a.msg.sbbh = ts.d.devicelist[i].deviceId
          a.msg.sbname = ts.d.devicelist[i].deviceName
          for (
            let j = 0;
            j < ts.d.devicelist[i].deviceConfiglist.length;
            j += 1
          ) {
            let msg11 = {}

            msg11.paramCodeId =
              ts.d.devicelist[i].deviceConfiglist[j].dataCode.codeId

            msg11.select1 =
              ts.d.devicelist[i].deviceConfiglist[j].paramCode.supCode.codeName
            msg11.select1val =
              ts.d.devicelist[i].deviceConfiglist[j].paramCode.supCode.codeId

            msg11.select2 =
              ts.d.devicelist[i].deviceConfiglist[j].paramCode.codeName
            msg11.select2val =
              ts.d.devicelist[i].deviceConfiglist[j].paramCode.codeId

            msg11.limitLow = ts.d.devicelist[i].deviceConfiglist[j].limitLow
            msg11.limitTop = ts.d.devicelist[i].deviceConfiglist[j].limitTop

            a.msg.msg11.push(msg11)

          }

          this.Psigndatas.push(a)

          console.log('88888888888888888', this.Psigndatas)
        }
        this.initsign()
      })
    },
    wheel(e) {
      //滑轮
      document
        .getElementById('div_picsign')
        .addEventListener('mousewheel', e => {
          var e = e || window.event,
            v = e.wheelDelta || e.detail
          if (v > 0) {
            this.ImageChange(true)
            window.event.returnValue = false
            return false
          } else {
            this.ImageChange(false)
            window.event.returnValue = false
            return false
          }
        })
    },
    ImageChange(args) {
      //放大，缩小

      var oimg = $('.picsignimg')
      var imgW = oimg.width()
      var imgH = oimg.height()
      console.log(this.zuoce, this.shangce)

      if (args) {
        if (this.zoom < 2) {
          this.zoom += 0.1
          oimg.css({
            width: imgW * 1.1,
            left: -(imgW * 1.1 - this.zuoce) / 2
          })
          oimg.css({
            height: imgH * 1.1,
            top: -(imgH * 1.1 - this.shangce) / 2
          })
        }
      } else {
        if (this.zoom > 1) {
          this.zoom -= 0.1
          oimg.css({
            width: imgW / 1.1,
            left: -(imgW / 1.1 - this.zuoce) / 2
          })
          oimg.css({
            height: imgH / 1.1,
            top: -(imgH / 1.1 - this.shangce) / 2
          })
        }
      }
      return this.zoom
    },
    tuozhuai() {
      var oDiv = $('.picsignimg')
      console.log(oDiv)
      var flag = false
      var clientX, newX, clientY, newY
      $('.picsign').on('mousedown', function(e) {
        var disX = e.clientX - oDiv.position().left //鼠标相对div X
        var disY = e.clientY - oDiv.position().top //鼠标相对div y

        console.log(
          'mousedown:',
          oDiv.offset().left,
          e.clientX,
          e.clientY,
          disX,
          disY
        )

        flag = true
        clientX = e.clientX //鼠标相对浏览器X
        clientY = e.clientY //鼠标相对浏览器y
        document.onmousemove = function(ev) {
          newX = clientX - ev.clientX //鼠标移动的距离x
          newY = clientY - ev.clientY //鼠标移动的距离y
          if (flag) {
            var a = $('.picsignimg')
              .css('left')
              .replace(/px/, '')
            var b = $('.picsignimg')
              .css('top')
              .replace(/px/, '')
            var c = $('.picsignimg')
              .css('right')
              .replace(/px/, '')
            var d = $('.picsignimg')
              .css('bottom')
              .replace(/px/, '')
            console.log('onmousemove：', ev.clientX, disX)

            if (newX < 0) {
              //向右拖动     //限制拖拽的边距，不能旁边留空
              if (Math.abs(a) > Math.abs(ev.clientX - disX)) {
                //据左边的距离大于拖动的
                oDiv.css({
                  left: ev.clientX - disX > 0 ? 0 : ev.clientX - disX + 'px'
                })
              }
            } else {
              console.log('left')
              if (
                Math.abs(c) > Math.abs(ev.clientX - oDiv.position().left - disX)
              ) {
                console.log('left111')
                //据右边的距离大于拖动的
                oDiv.css({
                  left: ev.clientX - disX > 0 ? 0 : ev.clientX - disX + 'px'
                })
              }
            }
            if (newY < 0) {
              //向上拖动
              if (Math.abs(b) > Math.abs(ev.clientY - disY)) {
                //据上边的距离大于拖动的
                oDiv.css({
                  top: ev.clientY - disY > 0 ? 0 : ev.clientY - disY + 'px'
                })
              }
            } else {
              if (Math.abs(c) > Math.abs(ev.clientY - disY)) {
                //据下边的距离大于拖动的
                oDiv.css({
                  top: ev.clientY - disY > 0 ? 0 : ev.clientY - disY + 'px'
                })
              }
            }
          }
        }
        document.onmouseup = function() {
          document.onmousemove = null
          document.onmouseup = null
          flag = false

          console.log('mouseup')
        }
      })
    },
    getimg() {
      console.log(this.src)

      //上传图片
      var fileimg = this.$refs.fileimg
      if (fileimg.files.length == 0) {
        return
      } else {
        this.flname = fileimg.files[0].name
        this.destroysign()
        // this.src = ''
        var reader = new FileReader()

        reader.readAsDataURL(fileimg.files[0])

        reader.onload = () => {
          console.log(reader.result)
          this.src = reader.result

          this.initsign()
          setTimeout(() => {
            this.zuoce = $('.picsignimg').width()
            this.shangce = $('.picsignimg').height()
          }, 200)
        }
      }
    },
    //标记部分
    output(msg) {
      $('.eventoutput').append('<p>' + msg + '</p>')
    },
    clearoutput() {
      $('.eventoutput').html('')
    },
    changeurlimg() {
      var i = 0
      var imgi = ['url(../img/bj1.png)', 'url(../img/bj.png)']
      var slik = $('.signdot')
      
      setInterval(function() {
        i++
        i = i % 2
        $('.signdot').css('background', imgi[i])
        $('.signdot').css('background-size', '100%')
      }, 500)
    },
    initsign() {
      var sign = $('#div_picsign').picsign({
        picurl: this.src,
        signdata: this.Psigndatas,
        editable: {
          //是否可编辑
          add: true, //是否可添加
          update: true, //是否可修改
          del: true, //是否可删除
          move: true //是否可移动
        },
        popwidth: 510,
        popheight: 200,
        inputwidth: 510,
        inputheight: 247
      })

      if (sign) {
        this.output('初始化')      
      for (let i = 0; i < this.Psigndatas.length; i+=1) {
        $("<span style='color:#fff;text-align:center;display:inline-block;margin-top:23px'>"+ this.Psigndatas[i].msg.sbname +"</span>").appendTo($('.signdot')[i])
        
      }
      this.tuozhuai()
      }
    },
    geilocls() {
      var data = $('#div_picsign').picsign('getData')
      console.log('data', data)

      // if (data) {
      //   // this.output('获取数据:' + JSON.stringify(data))
      //   for (let i = 0; i < data.length; i++) {
      //     delete data[i].signid
      //     console.log(data)
      //   }
      //   localStorage.removeItem('newsignData')
      //   localStorage.setItem('newsignData', JSON.stringify(data))
      //   console.log('iamlocal' + localStorage.getItem('newsignData'))
      // }
    },
    // getsign() {
    //   var data = $('#div_picsign').picsign('getData')
    //   if (data) {
    //     this.output('获取数据:' + JSON.stringify(data))
    //   }
    // },
    // toggle() {
    //   $('#div_picsign').picsign('toggle')
    // },
    destroysign() {
      if ($('#div_picsign').picsign('destroy')) {
        this.output('销毁')
      }
    }
    // Psave() {
    //   localStorage.removeItem('imgUrl')
    //   localStorage.removeItem('newsignData')
    //   this.geilocls()
    //   this.$confirm('是否保存当前操作？', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    //     .then(() => {
    //       localStorage.setItem('imgUrl', this.src)

    //       console.log('hha' + localStorage.getItem('newsignData'))
    //       this.$message({
    //         type: 'success',
    //         message: '保存成功!'
    //       })
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: 'info',
    //         message: '已取消保存'
    //       })
    //     })
    // }
  },
  mounted() {
    this.getPsigndatas()
    // this.destroysign()
    this.wheel()
    // this.changeurlimg()
    // this.clearoutput()
    // this.addsign()
    // this.getsign()
    // this.toggle()
  }
}
</script>

<style scoped>
.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover{
  background: #111c3f
}
body {
  overflow-y: hidden;
}
.input_btn {
  padding: 5px 10px;
  background: #00b0f0;
  color: #fff;
  border: none;
  border-radius: 5px;
}

label {
  position: relative;
}
/* #div_picsign {
  border: 1px dashed #ccc;
  padding: 20px;
} */
#fileinp {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 106px;
  height: 30px;
}
.picsignimg {
  width: 100%;
  height: 100%;
  position: absolute;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  vertical-align: middle;
}
#btn {
  margin-right: 5px;
}

#text {
  color: red;
}
#btn {
  padding: 10px 18px;
  background: #00b0f0;
  color: #fff;
  border: none;
  font-size: 13px;
  border-radius: 5px;
}
#div_picsign1 {
  width: 100%;
  max-height: 450px;
  position: relative;
  text-align: center;
}
#div_picsign {
  width: 100%;
  height: auto;
  position: relative;
  border: 1px dashed #ccc;
  overflow: hidden;
  height: 70vh;
  cursor: move;
  display: inline-block;
}
.picsign {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0px 0px 0px 110px rgba(255, 255, 255, 0.5);
  z-index: 100;
}
#div_picsign img {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}
.icon {
  width: 14px;
  height: 14px;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
